<template>
  <!-- <button id="dark-theme-button">dark</button> -->
  <!-- <button id="light-theme-button">light</button> -->
  <el-switch
    v-model="theme"
    active-text="dark"
    inactive-text="light"
    @change="changeSwitch"
  />
</template>
<script setup lang="ts">
import { ElSwitch } from "element-plus";
// Element Plus
import "element-plus/theme-chalk/index.css"; // 引入组件样式
// 图标和组件需要分开引入
import { onMounted, ref } from "vue";
let theme = ref(true);
const changeSwitch = (val: any) => {
  console.log(val);
  document.documentElement.setAttribute("data-theme", val ? "dark" : "light");
};
/* 切换主题 */
onMounted(() => {
  // 假设你有两个按钮用于切换主题
  // const darkThemeButton = document.getElementById(
  //   "dark-theme-button"
  // ) as HTMLButtonElement;
  // const lightThemeButton = document.getElementById(
  //   "light-theme-button"
  // ) as HTMLButtonElement;
  // darkThemeButton.addEventListener("click", () => {
  //   theme.value = darkThemeButton.value;
  //   document.documentElement.setAttribute("data-theme", "dark");
  //   // 可能需要重新加载样式表或注入新的CSS
  // });
  // lightThemeButton.addEventListener("click", () => {
  //   document.documentElement.setAttribute("data-theme", "light");
  //   // 可能需要重新加载样式表或注入新的CSS
  // });
});
</script>
<style lang="scss" scoped></style>
